<template>
  <div class="wapper">
    <div class="headerBB">
      <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M9 42C11.2091 42 13 40.2091 13 38C13 35.7909 11.2091 34 9 34C6.79086 34 5 35.7909 5 38C5 40.2091 6.79086 42 9 42Z"
          stroke="#333" stroke-width="4" stroke-linejoin="round" />
        <path
          d="M9 14C11.2091 14 13 12.2092 13 10C13 7.79086 11.2091 6 9 6C6.79086 6 5 7.79086 5 10C5 12.2092 6.79086 14 9 14Z"
          stroke="#333" stroke-width="4" stroke-linejoin="round" />
        <path
          d="M9 28C11.2091 28 13 26.2092 13 24C13 21.7908 11.2091 20 9 20C6.79086 20 5 21.7908 5 24C5 26.2092 6.79086 28 9 28Z"
          stroke="#333" stroke-width="4" stroke-linejoin="round" />
        <path d="M21 24H43" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M21 38H43" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M21 10H43" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      <span style="margin-left: 10px">手机进程 <span style="font-size: 15px;">({{ total }}个)</span></span>
    </div>
    <!-- <el-divider style="margin-top: 0px !important"></el-divider> -->
    <!-- <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="date" label="名称" width="300"> </el-table-column>
      <el-table-column prop="name" label="状态" width="180"> </el-table-column>
      <el-table-column prop="CPU" label="CPU"> </el-table-column>
      <el-table-column prop="内存" label="内存"> </el-table-column>
      <el-table-column prop="磁盘" label="磁盘"> </el-table-column>
      <el-table-column prop="网络" label="网络"> </el-table-column>
      <el-table-column prop="GPU" label="GPU"> </el-table-column>
      <el-table-column prop="CPU引擎" label="CPU引擎"> </el-table-column>
    </el-table> -->
    <div class="systemHeader">
      <div class="titleboxl" style="width:30%">名称</div>
      <div class="titleboxl" style="width:10%">PID</div>
      <div class="titleboxl" style="width:10%">PPID</div>
      <div class="titleboxl" style="width:10%">用户</div>
      <div class="titleboxl" style="width:10%">内存</div>
      <div class="titleboxl" style="width:30%">CMDLINE</div>
    </div>
    <div class="taskAdminSystem">
      <div class="listContent">
        <a-collapse v-model="activeKey" accordion>
          <a-collapse-panel v-for="(item, index) in tableData" :key="index" :show-arrow="item.children ? true : false">
            <template slot="header">

              <div class="systemHeader2">
                <!-- <svg t="1686301238942" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7670" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"><path d="M443.73333333 921.6a34.13333333 34.13333333 0 0 1 0 68.26666667H139.776C81.23733333 989.86666667 34.13333333 941.4656 34.13333333 882.21013333V141.78986667C34.13333333 82.5344 81.23733333 34.13333333 139.776 34.13333333h607.91466667C806.22933333 34.13333333 853.33333333 82.5344 853.33333333 141.78986667v194.62826666a34.13333333 34.13333333 0 0 1-68.26666666 0V141.78986667C785.06666667 119.808 768.1024 102.4 747.69066667 102.4H139.776c-20.41173333 0-37.376 17.408-37.376 39.38986667v740.42026666C102.4 904.192 119.36426667 921.6 139.776 921.6H443.73333333z" fill="#333303" p-id="7671"></path><path d="M750.93333333 989.86666667a273.06666667 273.06666667 0 1 1 0-546.13333334 273.06666667 273.06666667 0 0 1 0 546.13333334z m0-68.26666667a204.8 204.8 0 1 0 0-409.6 204.8 204.8 0 0 0 0 409.6z" fill="#333303" p-id="7672"></path><path d="M768 699.73333333h84.75306667a34.13333333 34.13333333 0 1 1 0 68.26666667H733.86666667a34.13333333 34.13333333 0 0 1-34.13333334-34.13333333v-102.4a34.13333333 34.13333333 0 0 1 68.26666667 0v68.26666666zM273.06666667 341.33333333a34.13333333 34.13333333 0 0 1 0-68.26666666h341.33333333a34.13333333 34.13333333 0 0 1 0 68.26666666H273.06666667z m0 273.06666667a34.13333333 34.13333333 0 0 1 0-68.26666667h68.26666666a34.13333333 34.13333333 0 0 1 0 68.26666667h-68.26666666z" fill="#333303" p-id="7673"></path></svg> -->
                <div class="titleboxl2" style="width:30%">{{ item.field_1 }}<span style="font-size:13px;"
                    v-if="item.children"> ({{ item.children.length }})</span></div>
                <div class="titleboxl2" style="width:10%">{{ item.field_2 }}</div>
                <div class="titleboxl2" style="width:10%">{{ item.field_3 }}</div>
                <div class="titleboxl2" style="width:10%">{{ item.field_4 }}</div>
                <div class="titleboxl2" style="width:10%"></div>
                <div class="titleboxl2" style="width:30%">{{ item.field_5 }}</div>
              </div>
            </template>
            <!-- <div class="contentBBBB" v-if="item.children">
              <div  class="systemHeader2 overItem" style="min-height:30px;border-bottom:1px solid #e1e1e1;line-height:30px;padding-left:55px;" v-for="(data,j) in item.children" :key="j">
                <div class="titleboxl2" style="width:30%;">{{ data.field_1 }}</div>
                <div class="titleboxl2" style="width:10%;">{{ data.field_2 }}</div>
                <div class="titleboxl2" style="width:10%;">{{ data.field_3 }}</div>
                <div class="titleboxl2" style="width:10%;">{{ data.field_4 }}</div>
                <div class="titleboxl2" style="width:10%;">{{ data.field_5 }} Byte</div>
                <div class="titleboxl2" style="width:30%;">{{ data.field_6 }}</div>
              </div>
            </div> -->
            <!-- 第二层 -->
            <a-collapse default-active-key="4" v-if="item.children" :showArrow="false">
              <a-collapse-panel v-for="(data, j) in item.children" :key="j" :show-arrow="data.children ? true : false">
                <template slot="header">
                  <div class="systemHeader2">
                    <div class="titleboxl2" style="width:30%">{{ data.field_1 }}<span style="font-size:13px;"
                        v-if="data.children"> ({{ data.children.length }})</span></div>
                    <div class="titleboxl2" style="width:10%">{{ data.field_2 }}</div>
                    <div class="titleboxl2" style="width:10%">{{ data.field_3 }}</div>
                    <div class="titleboxl2" style="width:10%">{{ data.field_4 }}</div>
                    <div class="titleboxl2" style="width:10%">{{ data.field_5 }} Byte</div>
                    <div class="titleboxl2" style="width:30%">{{ data.field_6 }}</div>
                  </div>
                </template>
                <!-- 第三层 -->
                <a-collapse default-active-key="5" v-if="data.children" :showArrow="false">
                  <a-collapse-panel v-for="(d, i) in data.children" :key="i" :show-arrow="d.children ? true : false">
                    <template slot="header">
                      <div class="systemHeader2">
                        <div class="titleboxl2" style="width:30%">{{ data.field_1 }}<span style="font-size:13px;"
                            v-if="d.children">({{ d.children.length }})</span></div>
                        <div class="titleboxl2" style="width:10%">{{ d.field_2 }}</div>
                        <div class="titleboxl2" style="width:10%">{{ d.field_3 }}</div>
                        <div class="titleboxl2" style="width:10%">{{ d.field_4 }}</div>
                        <div class="titleboxl2" style="width:10%">{{ d.field_5 }} Byte</div>
                        <div class="titleboxl2" style="width:30%">{{ d.field_6 }}</div>
                      </div>
                    </template>

                    <!-- 第四层 -->
                    <a-collapse default-active-key="5" v-if="d.children" :showArrow="false">
                      <a-collapse-panel v-for="(e, y) in d.children" :key="y" :show-arrow="e.children ? true : false">
                        <template slot="header">
                          <div class="systemHeader2">
                            <div class="titleboxl2" style="width:30%">{{ e.field_1 }}<span style="font-size:13px;"
                                v-if="e.children">({{ d.children.length }})</span></div>
                            <div class="titleboxl2" style="width:10%">{{ e.field_2 }}</div>
                            <div class="titleboxl2" style="width:10%">{{ e.field_3 }}</div>
                            <div class="titleboxl2" style="width:10%">{{ e.field_4 }}</div>
                            <div class="titleboxl2" style="width:10%">{{ e.field_5 }} Byte</div>
                            <div class="titleboxl2" style="width:30%">{{ e.field_6 }}</div>
                          </div>
                        </template>
                        <!-- 第五层 -->
                        <a-collapse default-active-key="5" v-if="e.children" :showArrow="false">
                          <a-collapse-panel v-for="(f, g) in e.children" :key="g" :show-arrow="f.children ? true : false">
                            <template slot="header">
                              <div class="systemHeader2">
                                <div class="titleboxl2" style="width:30%">{{ f.field_1 }}<span style="font-size:13px;"
                                    v-if="f.children">({{ d.children.length }})</span></div>
                                <div class="titleboxl2" style="width:10%">{{ f.field_2 }}</div>
                                <div class="titleboxl2" style="width:10%">{{ f.field_3 }}</div>
                                <div class="titleboxl2" style="width:10%">{{ f.field_4 }}</div>
                                <div class="titleboxl2" style="width:10%">{{ f.field_5 }} Byte</div>
                                <div class="titleboxl2" style="width:30%">{{ f.field_6 }}</div>
                              </div>
                            </template>
                          </a-collapse-panel>
                        </a-collapse>
                      </a-collapse-panel>
                    </a-collapse>
                  </a-collapse-panel>
                </a-collapse>
              </a-collapse-panel>
            </a-collapse>
          </a-collapse-panel>
        </a-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import { getRxTmpPathApi, getPhoneInFoApi } from '@/api/phoneInfo/index'
export default {
  name: "tableProcess",
  props: ['sendData'],
  components: {
  },
  data() {
    return {
      offset: 1,
      limit: 10,
      tableData: [],
      currentPage: 1,
      total: 0,
      size: 20,
      current: 1,
      activeKey: ['1'],
      text: '123',
      isActive: 0,
      // s:'ppid等于0是根节点,如果有项ppid等于另一项的pid则视为另一项为该项的父节点请帮我格式化数据',
      customStyle: 'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden'
    };
  },
  watch: {
    '$store.state.account.basePhone': function () {
      this.INITfUNCTION();
    }
  },
  created() {
    this.INITfUNCTION();
  },
  mounted() {
  },
  methods: {

    INITfUNCTION() {
      let api = '/' + this.sendData.href;
      let data = {
        proof_num: this.sendData.proof_num,
        offset: this.offset,
        limit: this.limit
      }
      getPhoneInFoApi(data, api).then(res => {
        this.list = res.data;
        this.tableData = formatDataToTree(res.data)
        this.total = this.tableData.length;
        function formatDataToTree(data) {
          const dataMap = {};
          const tree = [];

          // 将数据映射到一个对象，以便通过 PID 快速查找
          for (const item of data) {
            item.children = []; // 初始化 children 属性
            dataMap[item.field_2] = item;
          }

          // 遍历数据，将每个节点添加到其父节点的 children 数组中
          for (const item of data) {
            const parent = dataMap[item.field_3];
            if (parent) {
              parent.children.push(item);
            } else {
              // 如果没有找到父节点，则将当前节点添加到根节点数组中
              tree.push(item);
            }
          }
          // 移除没有子节点的节点的 children 属性
          tree.forEach(node => {
            removeEmptyChildren(node)
          });
          function removeEmptyChildren(node) {
            if (node.children && node.children.length > 0) {
              for (const child of node.children) {
                removeEmptyChildren(child);
              }
            } else {
              delete node.children;
            }
          }
          console.log(tree)
          return tree;
        }


        // this.total = Number(this.sendData.cnt);
      }).catch(error => {

      })

      return
      // console.log(this.$route.params.nodeData)
      let node = this.sendData;
      let dataJson = {
        "proof_num": node.proof_num,
        "rxTmpPath": '/' + node.subtype
      }
      getRxTmpPathApi(dataJson).then(res => {
        if (!res.data) return
        const input = res.data;

        const lines = input.split("\n");
        const result = [];

        for (const line of lines) {
          const parts = line.trim().split(/\s+/);
          const item = {
            NAME: parts[0],
            PID: parseInt(parts[1], 10),
            PPID: parseInt(parts[2], 10),
            USER: parts[3],
            VSZ: parts[4],
            CMDLINE: parts[5],
          };
          if (item.PID) {
            result.push(item);
          }
        }
        const jsonOutput = JSON.parse(JSON.stringify(result, null, 2));
        this.total = jsonOutput.length;

        function formatData(data) {
          const formattedData = {};

          // Create a mapping of PID to process data
          const processData = {};
          jsonOutput.forEach(item => {
            const { PID } = item;
            processData[PID] = item;
          });

          // Build the hierarchical structure
          jsonOutput.forEach(item => {
            const { PID, PPID } = item;
            const parent = processData[PPID];

            if (parent) {
              parent.children = parent.children || [];
              parent.children.push(item);
            } else {
              formattedData[PID] = item;
            }
          });

          return formattedData;
        }

        const formattedData = formatData(jsonOutput);
        this.tableData = formattedData;
      }).catch(error => {

      })
    },
    handleSizeChange(val) {
      this.size = val;
    },
    handleCurrentChange(val) {
      this.current = val;
    },
  },
};
</script>

<style lang="scss">
.contentBBBB {
  height: 570px;
  overflow-y: auto;
}

.overItem {
  cursor: pointer;
}

.overItem:hover {
  background: #cbeafa;
}

.wapper {
  // width: 90%;
  // border: 1px solid red;
  // margin: 0 auto;
  padding: 10px;
  padding-top: 0;
}

.headerBB {
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  padding-left: 10px;
  font-weight: bold;
  position: relative;
  display: flex;
  align-items: center;
}

.lineHeader {
  position: absolute;
  width: 10px;
  height: 80px;
  left: 0;
  background: #1faef5;
}

.taskAdminSystem {
  height: 750px;
  overflow-y: auto;
  border: 1px solid rgb(215, 215, 215);
  position: relative;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.systemHeader {
  height: 60px;
  border: 1px solid #ebebeb;
  display: flex;
}

.systemHeader2 {
  width: auto;
  min-height: 17px;
  display: flex;
  // margin-left:12px;
}

.titleboxl {
  border-bottom: 1px solid rgb(206, 205, 205);
  border-right: 1px solid rgb(206, 205, 205);
  height: 100%;
  line-height: 60px;
  font-size: 12px;
  // padding-left:20px;
  text-align: center;
}

.titleboxl2 {
  min-height: 100%;
  line-height: 30px;
  font-size: 12px;
  // padding-left:10px;
  word-wrap: break-word;
  border-right: 1px solid #dfdede;
}

// .systemHeader3{
//   min-height: 30px;
//   line-height: 30px;
//   font-size: 20px;
//   padding-left:10px;
// }
@media screen and (min-width: 2360px) {
  .taskAdminSystem {
    height: 76vh;
    overflow-y: auto;
    border: 1px solid rgb(180, 180, 180);
    position: relative;
  }

  .contentBBBB {
    height: 50vh;
    overflow-y: auto;
  }

}
@media screen and (min-width: 2561px) {
  .taskAdminSystem {
    height: 61vh;
    overflow-y: auto;
    border: 1px solid rgb(180, 180, 180);
    position: relative;
  }

  .contentBBBB {
    height: 50vh;
    overflow-y: auto;
  }

}
</style>